<template>
	<view>
		<template v-if="username">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
				<view class="u-m-r-10" @click="uploadPic">
					<u-avatar :src="avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">hi，你好</view>
					<view v-if="username" class="u-font-14 u-tips-color">昵称:{{nickname}}</view>
					<view v-else class="u-font-14 u-tips-color">昵称:游客</view>
				</view>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="list" title="个人信息" @click="toBaseInfo"></u-cell-item>
				</u-cell-group>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="star" title="我的收藏" @click="toCollect"></u-cell-item>
					<u-cell-item icon="order" title="全部订单" @click="toOrder"></u-cell-item>
					<u-cell-item icon="map" title="地址管理" @click="toAddress"></u-cell-item>
					<u-cell-item icon="rmb-circle" title="退货/售后" @click="toAfterMarket"></u-cell-item>
				</u-cell-group>
			</view>
			<view>
				<u-cell-group>
					<u-cell-item icon="setting" title="设置"></u-cell-item>
				</u-cell-group>
				<u-modal @confirm="confirm" v-model="showClose" :content="content" :show-title="false"
					:show-cancel-button='true'></u-modal>
				<view>
					<u-toast ref="uToast" />
				</view>
				<u-cell-group>
					<u-cell-item icon="close" title="退出" :arrow="false" @click="toClose"></u-cell-item>
				</u-cell-group>
			</view>
		</template>
		<template v-else>
			<u-empty text="暂无权限" mode="permission"></u-empty>
			<view class="u-flex u-row-center" style="color: #1296db;" @click="goLogin">点击去登录</view>
		</template>
	</view>
</template>

<script>
	// let _this = {}
	export default {
		data() {
			return {
				show: true,
				showClose: false,
				content: '是否退出',
				username: '',
				avatar: '',
				nickname: ''
			}
		},
		watch: {
			avatar(val, oldval) {
				this.$forceUpdate()
				console.log(val);

			}
		},
		onLoad() {
			// _this = this
		},
		onShow() {
			try {
				const username = uni.getStorageSync('username');
				const nickname = uni.getStorageSync('nickname');
				if (username) {
					this.username = username
					this.nickname = nickname
				}
			} catch (e) {
				// error
			}
			this.getUserAvatar()
		},
		methods: {
			//上传头像
			uploadPic() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: images => {
						console.log(images)
						uniCloud.uploadFile({
							filePath: images.tempFilePaths[0],
							cloudPath: 'a.jpg',
							success(res) {
								_this.avatar = res.fileID
								console.log(_this.avatar);
								const username = uni.getStorageSync('username');
								const db = uniCloud.database();
								let collection = db.collection('uni-id-users')
								let user = collection.where({
									username: username
								}).update({
									avatar: _this.avatar
								})
							}
						})
					}
				})
				this.$forceUpdate()
			},
			//获取用户信息（头像）
			getUserAvatar() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: 'userAvatar',
					data: {
						username: username
					}
				}).then(res => {
					this.avatar = res.result
				})
			},
			//
			toCollect() {
				this.$u.route({
					url: 'pages/collect/collect'
				})
			},
			toBaseInfo() {
				this.$u.route({
					url: 'pages/center/baseInfo'
				})
			},
			toOrder() {
				this.$u.route({
					url: 'pages/order/order'
				})
			},
			toAddress() {
				this.$u.route({
					url: 'pages/address/address'
				})
			},
			toAfterMarket() {
				this.$u.route({
					url: 'pages/aftermarket/aftermarket'
				})
			},
			toClose() {
				this.showClose = true
			},
			confirm() {
				uni.removeStorageSync('uni_id_token');
				uni.removeStorageSync('username');
				uni.removeStorageSync('nickname');
				uni.removeStorageSync('picUrl');
				uni.removeStorageSync('uni-needCaptcha');
				uni.removeStorageSync('login_type');
				uni.removeStorageSync('uni_id_has_pwd');
				uni.removeStorageSync('uni-needCaptcha');
				this.$refs.uToast.show({
					title: '退出成功',
					type: 'primary',
				})
				setTimeout(() => {
					this.$u.route({
						type: 'reLaunch',
						url: '/pages/user/login'
					});
				}, 2000)
			},
			goLogin() {
				this.$u.route({
					type: 'reLaunch',
					url: 'pages/user/login'
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
